---
import { MetaData } from './lib/MetaData';
import { ExampleStyle } from './lib/ExampleStyle';
import { Styles } from './lib/Styles';
import { Extras } from './lib/Extras';
import { SystemJs } from './lib/SystemJs';
import { pathJoin } from '@utils/pathJoin';
import { getCacheBustingUrl } from '@utils/gridLibraryPaths';
import { Scripts } from './lib/Scripts';

interface Props {
    isDev: boolean;
    title: string;
    isEnterprise: boolean;

    modifiedTimeMs: number;
    entryFileName: string;

    styleFiles?: string[];
    scriptFiles: string[];
    appLocation: string;
    boilerplatePath: string;
    extraStyles?: string;
    headFragment?: string;
    extras?: string[];
    usesMathRandom?: boolean;
    nonce?: string;
}

const {
    title,
    isDev,
    isEnterprise,
    modifiedTimeMs,
    appLocation,
    entryFileName,
    styleFiles,
    scriptFiles,
    boilerplatePath,
    extraStyles,
    headFragment,
    extras,
    usesMathRandom,
    nonce,
} = Astro.props as Props;

const startFile = pathJoin(appLocation, entryFileName);
---

<html lang="en">
    <head>
        <MetaData isDev={isDev} title={`Angular Example - ${title}`} modifiedTimeMs={modifiedTimeMs} />
        <ExampleStyle rootSelector="my-app" extraStyles={extraStyles} />
        <Styles
            baseUrl={appLocation}
            files={isDev && styleFiles
                ? styleFiles
                      .filter((file: string) => !file.includes('style.css') && !file.includes('styles.css'))
                      .map((file: string) => getCacheBustingUrl(file, modifiedTimeMs))
                : []}
        />
        <Extras extras={extras ?? []} />
        <Fragment set:html={headFragment} />
    </head>
    <body>
        <my-app></my-app>

        <script is:inline nonce={nonce}>
            document.write('<base href="' + document.location + '" />');
        </script>
        <script is:inline nonce={nonce} src="https://cdn.jsdelivr.net/npm/core-js-bundle@3.6.5/minified.js"></script>
        <script is:inline nonce={nonce} src="https://cdn.jsdelivr.net/npm/zone.js@0.14.3/bundles/zone.umd.min.js"
        ></script>

        {scriptFiles && <Scripts baseUrl={appLocation} files={scriptFiles} nonce={nonce} />}
        <SystemJs
            isDev={isDev}
            boilerplatePath={boilerplatePath}
            appLocation={appLocation}
            startFile={startFile}
            internalFramework={'angular'}
            isEnterprise={isEnterprise}
            usesMathRandom={usesMathRandom}
            nonce={nonce}
        />
        <Styles
            baseUrl={appLocation}
            files={styleFiles
                ? styleFiles.filter((file: string) => file.includes('style.css') || file.includes('styles.css'))
                : []}
        />
        <slot />
    </body>
</html>
